import { useCallback, useEffect, useRef, useState } from 'react'

import './App.css'
import { canRunWebGPU, main } from './code/main'

function App() {
  const ref = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    if (canRunWebGPU()) {
      if (ref.current) {
        console.log('run')
        main(ref.current)
      } else
        alert('no canvas count')
    } else {
        alert('browser no webgpu support')
    }
  })

  useEffect(() => {
    const canvas = ref.current

    if (canvas == null)
      return

    const observer = new ResizeObserver(entries => {
      for (const entry of entries) {
        const canvas = entry.target as HTMLCanvasElement;
        const width = entry.contentBoxSize[0].inlineSize;
        const height = entry.contentBoxSize[0].blockSize;
        canvas.width = width
        canvas.height = height
      }
    });
    observer.observe(canvas);
  })

  return (
    <>
      <canvas className='wgpu-canvas' ref={ref}></canvas>
    </>
  )
}

export default App
